<script setup lang="ts">
import { useStatisticalIndicators } from '@/mixins/StatisticalIndicators/MixinStatisticalIndicators'
import type { CustomDialogInstance } from '@/types/modules/public'
import type { StatisticalIndicator } from '@/types/modules/statistical-indicator'
import { CONTAIN_SUB } from '@/enum/modules/public'
import type { Point } from '@/components/ReadonlyPointTree/ReadonlyPointTree'

const emits = defineEmits<{
  (e: 'selected', value: StatisticalIndicator): void
}>()

const dialogRef = ref<CustomDialogInstance>()
const keyword = ref('')
const [point, setPoint] = useState<Point | null>(null)
const containSub = ref<CONTAIN_SUB>(CONTAIN_SUB.NO_SUB)
const [selected, setSelected]
  = useState<StatisticalIndicator | null>(null)

const {
  loading,
  columns: _columns,
  lists,
  pagination,
  queryIndicatorsByPage,
} = useStatisticalIndicators()
const columns = _columns.filter(
  v =>
    ![
      'calculationalExpression',
      'statisticalExpression',
    ].includes(v.prop as string),
)

function clickRow(row: StatisticalIndicator) {
  close()
  setSelected(row)
}

watch(
  () => selected.value,
  (val) => {
    if (val) {
      emits('selected', val)
    }
  },
)

async function clickSearch() {
  pagination.pageNumber = 1
  await nextTick()
  getLists()
}

function getLists() {
  queryIndicatorsByPage({
    pageNumber: pagination.pageNumber,
    pageSize: pagination.pageSize,
    keyword: unref(keyword),
    containSub: unref(containSub),
    pointId: unref(point)?.id,
  })
}
async function clickNode(o: Point) {
  setPoint(o)
  await nextTick()
  getLists()
}

function open() {
  setSelected(null)
  pagination.pageNumber = 1
  // getLists();
  dialogRef.value?.open()
}
function close() {
  dialogRef.value?.close()
}

defineExpose({
  open,
  close,
})
</script>

<template>
  <CustomDialog
    ref="dialogRef"
    title="选择指标"
    class="indicator-picker-dialog"
    :show-confirm-button="false"
    cancel-button-text="关闭"
    :no-max-height="true"
    width="60%"
  >
    <div class="flex overflow-hidden" style="height: 50vh;width:100%;">
      <div class="height-fill roll flex-shrink-0">
        <div class="height-fill padding-xs border rounded-sm" style="width: 240px;">
          <ReadonlyPointTree fire :show-filter="false" :show-title="false" @click-node="clickNode" />
        </div>
      </div>
      <div class="margin-left-sm h-full w-[calc(100%-260px)] flex flex-col">
        <ElForm inline class="flex-shrink-0">
          <ElFormItem>
            <ContainSubRadio v-model="containSub" />
          </ElFormItem>
          <ElFormItem label="关键字">
            <ElInput
              v-model="keyword"
              placeholder="指标编码/指标名称"
            />
          </ElFormItem>
          <ElFormItem>
            <SearchButton @click="clickSearch" />
          </ElFormItem>
        </ElForm>
        <div class="roll flex-1">
          <TableLists
            :loading="loading"
            :columns="columns"
            :lists="lists"
            :show-toolbox="false"
            :highlight-current-row="true"
            height="100%"
            style="
              --el-table-header-bg-color: var(
                --el-bg-color-page
              );
            "
            @row-click="clickRow"
          />
        </div>
        <div class="self-end">
          <ListsPagination
            v-model:page-num="pagination.pageNumber"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            @current-change="getLists"
            @size-change="getLists"
          />
        </div>
      </div>
    </div>
  </CustomDialog>
</template>

<style lang="scss">
.indicator-picker-dialog {
  .el-dialog__body {
    border-bottom: 0;
  }
}
</style>
